<template>
  <div class="welcome-page">
    <section class="hero">
      <div class="hero-text">
        <div class="hello">您好，<span>{{ realName || userName || '用户' }}</span></div>
        <h1>欢迎使用 ERP 管理系统</h1>
        <p>从下方快捷入口或左侧菜单开始您的工作。</p>
        <div class="hero-actions">
          <el-button type="primary" size="large" @click="$router.push('/BOMList')">进入 BOM 管理</el-button>
        </div>
      </div>
      <div class="hero-illus">
        <div class="bubble b1" /><div class="bubble b2" /><div class="bubble b3" />
      </div>
    </section>

    <section class="cards">
      <el-row :gutter="16">
        <el-col :xs="24" :sm="12" :md="8">
          <div class="card">
            <div class="card-title">BOM 管理</div>
            <div class="card-sub">维护成品与配件清单，支持版本与默认版。</div>
            <el-button type="primary" text @click="$router.push('/BOMList')">立即前往</el-button>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <div class="card">
            <div class="card-title">帮助与文档</div>
            <div class="card-sub">查看使用说明与常见问题。</div>
            <el-button type="primary" text @click="goHelp">查看帮助</el-button>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const userName = ref('')
const realName = ref('')

onMounted(() => {
  userName.value = localStorage.getItem('erp_userName') || ''
  realName.value = localStorage.getItem('erp_realName') || ''
})

function goHelp() {
  window.open('https://element-plus.org/zh-CN/guide/installation.html', '_blank')
}
</script>

<style scoped>
.welcome-page {
  padding: 0 12px 16px;
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  overflow: hidden;
}
.hero-text h1 { margin: 6px 0 8px; font-size: 24px; font-weight: 700; color: #333; }
.hero-text p { margin: 0 0 12px; color: #666; }
.hello { color:#666; font-size:14px; }
.hello span { color:#409EFF; font-weight:600; }
.hero-actions .el-button + .el-button { margin-left: 8px; }
.hero-illus { position: relative; flex: 0 0 240px; height: 140px; }
.bubble { position:absolute; border-radius:50%; filter: blur(10px); opacity:.6; }
.b1{ width:160px; height:160px; right: -20px; top:-20px; background:#90caf9; }
.b2{ width:120px; height:120px; right: 60px; bottom:-20px; background:#ce93d8; }
.b3{ width:80px; height:80px; right: 160px; top:10px; background:#a5d6a7; }

.cards { margin-top: 16px; }
.card { background:#fff; border-radius:12px; padding:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.card-title { font-weight:700; font-size:16px; margin-bottom:6px; }
.card-sub { color:#808191; margin-bottom:8px; }

@media (max-width: 768px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-illus { width: 100%; height: 100px; }
}
</style>
